import { useEffect, useState } from 'react'
import { Card } from 'antd'

import { apiGetOrderProductBoxInfo } from '../../apis'
import { useUrlParams } from '../../utils'
import styles from './styles.module.less'

export const ProductInfo = () => {
  const { waybillNo } = useUrlParams()
  const [productBoxInfo, setProductBoxInfo] = useState<
    { label: string; value: number | string | null; unit: string }[]
  >([])

  const getOrderProductBoxInfo = async () => {
    const res = await apiGetOrderProductBoxInfo({ waybillNo })
    setProductBoxInfo([
      { label: '总箱数', value: res?.boxNum ?? null, unit: '箱' },
      { label: '总重量', value: res?.weight ?? null, unit: 'kg' },
      { label: '总体积', value: res?.volume ?? null, unit: 'm³' },
    ])
  }

  useEffect(() => {
    getOrderProductBoxInfo()
  }, [])

  return (
    <Card title="产品信息">
      <div className={styles.stats_grid}>
        {productBoxInfo.map(item => (
          <div key={item.label} className={styles.stat_card}>
            <div className={styles.stat_card_header}>{item.label}</div>
            <div className={styles.stat_card_body}>
              <span className={styles.stat_card_value}>{item.value ?? '--'}</span>
              <span className={styles.stat_card_unit}>{item.unit}</span>
            </div>
          </div>
        ))}
      </div>
    </Card>
  )
}
